<template>
  <div class="common-layout">
    <el-container>
      <el-aside :class="{ collapse: isCollapseMenu }">
        <nav-menu></nav-menu>
      </el-aside>
      <el-container>
        <el-header>
          <nav-controller></nav-controller>
          <nav-tab></nav-tab>
        </el-header>
        <el-scrollbar max-height="100%">
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-scrollbar>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from "@/components/nav/NavMenu.vue";
import NavController from "@/components/nav/NavController.vue";
import NavTab from "@/components/nav/NavTab.vue";
import { defineComponent, computed } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  components: { NavMenu, NavController, NavTab },
  setup() {
    const store = useStore();

    return {
      isCollapseMenu: computed(() => store.state.isCollapseMenu),
    };
  },
});
</script>

<style lang="scss">
.common-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.el-container {
  height: 100%;
}

.el-header {
  height: 84px !important;
  padding: 0 !important;
  border-left: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.el-aside {
  height: 100%;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition-duration: 1s;
}

.collapse {
  width: 129px !important;
}
</style>
